<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出与垂直对齐方式</title>
    <style>
        /* 1.溢出 */
        div {
            border: 5px solid #ff00ff;
            /*
                1.溢出前提条件
                  父元素限制大小时才可产生溢出 否则父类元素的大小会随子元素内容多少进行调整
             */
            width: 640px;
            height: 360px;
            /* 1.1 溢出默认值 表示溢出部分可见 */
            overflow: visible;
            /* 1.2 溢出部分隐藏 多余部分直接裁掉 */
            overflow: hidden;
            /* 1.3 给无法显示在当前范围内的内容附加滚动条(默认右下都有滚动条 但是只有对应方向的滚动条才起作用) */
            overflow: scroll;
            /* 1.4 给无法显示在当前范围内的内容的对应方向增加滚动条 能显示完全的方向不会添加 */
            overflow: auto;
        }
        /* 2.垂直方向的对齐方式 */
        .img2 {
            width: 200px;
            vertical-align: baseline;/* 垂直对齐方式: 默认向此元素的基线对齐 */
            vertical-align: bottom;/* 向此元素的底线对齐 */
            vertical-align: top;/* 向此元素的顶线对齐 */
            vertical-align: middle;/* 向此元素的中线对齐 */
        }
    </style>
</head>
<body>
abyj <img class="img2" src="img/img.png">国圈<img class="img2" src="img/img.png">

<hr>

<div>
    <img src="img/1.jpg">
    <img src="img/1.jpg">
    <img src="img/1.jpg">
</div>
</body>
</html>